<!-- 递归 家族节点 自己写的 没用上 -->
<template>
	<div v-for="(v,i) in list" :key="i">
		<div class="flex c3">
			<div v-for="(vv,ii) in num" :key="ii" class="c4" :class="'c4-'+ii+num"></div>
			<div class="c5 flex" @click.stop="select(v)">
				<div v-for="(val,index) in v.value" :key="index" class="c2 flex">
					<div class="flex img">
						<img :src="config.serverImg+val.img" alt="">
					</div>
					<div class="c1">
						<p>{{val.name}}</p>
						<p>id:{{v.id}}-{{val.year}}</p>
					</div>
				</div>
			</div>
		</div>
		<dg :list="v.children" :num="num+1"  @select="select"/>
	</div>
</template>

<script setup>
	import dg from "@/components/dg.vue"
	import config from "@/common/config.js";
	const emit = defineEmits(["select"])
	const props = defineProps({
		list: {
			type:Array,
			default:[]
		},
		num: {
			type:Number,
			default:1
		},
	})
	
	const select = (v)=>{
		emit('select',v)
	}
</script>

<style scoped>
	
	.c1{font-size: 14px;margin-top: 5px;color: #383838;}
	.c2{width: 100px;}
	.c2 .img{margin-right: 5px;}
	.c2 img{width: 40px;height: 40px;border-radius: 100%;}
	/* .c3{margin-bottom: 20px;} */
	.c4{width: 64px;position: relative;height:64px;}
	.c4::after{content:'';display: block;position: absolute;left:64px;height: 64px;background: #111;width: 1px;bottom:0;}
/* 	.c4-02{border-bottom:0;}
	.c4-03{border-bottom:0;}
	.c4-13{border-bottom:0;} */
	.c5{padding: 10px;border-bottom:1px solid #111;}
</style>
